<template>
	<view class="order-repaymentCard">
		<view class="title-text">银行卡绑定</view>
		<view class="title-desc">绑定完成后，资金将打款至该账户</view>
		<view class="auth-form-box">
			<view class="auth-form-content">
				<view class="auth-form-item">
					<view class="auth-form-label">卡类型</view>
					<view class="">
						<view v-if="isDisabled">{{$common.selectDictLabel(typeOptions, form.treatyType) || '-'}}</view>
						<fu-radio v-else v-model="form.treatyType" :options="typeOptions"></fu-radio>
					</view>
				</view>
				<view class="auth-form-item">
					<view class="auth-form-label">持卡人</view>
					<view class="auth-form-value">
						<u-input :disabled="true" v-model="userInfo.name" placeholder="获取中" type="text" :custom-style="{fontSize:'32rpx'}" input-align="right"></u-input>
					</view>
				</view>
				<view class="auth-form-item">
					<view class="auth-form-label">开户行</view>
					<view class="flex-align-center" @click="handleBank">
						<view>{{form.bankName || '-'}}</view>
						<view class="mar-l-5" v-if="!isDisabled">
							<u-icon name="arrow-down-fill" color="#c0c4cc" size="26"></u-icon>
						</view>
					</view>
				</view>
				<view class="auth-form-item">
					<view class="auth-form-label">银行卡号</view>
					<view class="auth-form-value">
						<u-input :disabled="isDisabled" v-model="form.bankCard" placeholder="请填写您的卡号" type="number" :custom-style="{fontSize:'32rpx'}" input-align="right"></u-input>
					</view>
				</view>
				<view class="auth-form-item" v-if="form.treatyType==12">
					<view class="auth-form-label">CVV2</view>
					<view class="auth-form-value">
						<u-input :disabled="isDisabled" v-model="form.custCardCvv2" placeholder="请填写信用卡背面三位数" type="number" :custom-style="{fontSize:'32rpx'}" input-align="right"></u-input>
					</view>
				</view>
				<view class="auth-form-item" v-if="form.treatyType==12">
					<view class="auth-form-label">卡有效期</view>
					<view class="">
						<u-input :disabled="isDisabled" v-model="form.custCardValidDate" placeholder="请填写4位时间" type="number" maxlength="4" :custom-style="{fontSize:'32rpx'}" input-align="right"></u-input>
						<!-- <view v-if="isDisabled">{{form.custCardValidDate || '-'}}</view>
						<fu-picker v-model="form.custCardValidDate" mode="date"></fu-picker> -->
					</view>
				</view>
				<view class="auth-form-item">
					<view class="auth-form-label">手机号码</view>
					<view class="auth-form-value">
						<u-input :disabled="isDisabled" v-model="form.bankPhone" placeholder="银行预留手机号码" type="number" :custom-style="{fontSize:'32rpx'}" input-align="right"></u-input>
					</view>
				</view>
				<view class="auth-form-item" v-if="userInfo.fourAuthentication!==1 || userInfo.secondFourAuthentication!==1">
					<view class="auth-form-label">短信验证</view>
					<view class="auth-form-value flex-align-center">
						<u-input v-model="authCode" placeholder="请输入验证码" type="number" :custom-style="{fontSize:'32rpx'}" input-align="right"></u-input>
						<view class="get-code" :class="{disabled:codeText!='获取验证码' && codeText!='重新获取'}" @click="getCode()">{{codeText}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="color-999 mar-t-20">
			<view class="">绑卡说明：</view>
			<view class="mar-t-10 line-height-40">1、个人银行卡仅限支持1类卡，请先确认卡类型。</view>
			<view class="mar-t-5 line-height-40">2、请先确认，卡是您本人，并且已经开通银联支付。</view>
			<view class="mar-t-5 line-height-40">3、如遇绑卡不成功，请更换银行卡再次操作，或者咨询客服。</view>
		</view>
		<footer-btn v-if="userInfo.fourAuthentication!==1 || userInfo.secondFourAuthentication!==1">
			<view class="agreement-box" @click="agreement=!agreement">
				<static-image v-if="agreement" src="/static/img/common/agreement-active.png" width="32" height="32"></static-image>
				<static-image v-else src="/static/img/common/agreement-no.png" width="32" height="32"></static-image>
				<view class="mar-l-5">
					<text>我已阅读并同意</text>
					<text class="color-blue" @click.stop="$common.navigator('/pagesA/setting/userAgreement')">《用户服务协议》</text>
				</view>
			</view>
			<u-button :disabled="!authCode" shape="circle" @click="confirm()" type="primary" :custom-style="{background:'#3385FF',fontSize:'32rpx',fontWeight:'bold',height:'90rpx',letterSpacing: '8rpx'}">{{userInfo.fourAuthentication===1?'确认绑卡':'申请绑卡'}}</u-button>
		</footer-btn>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒" unique-key="bankCard"></u-verification-code>
		<select-bank :visible.sync="bankShow" :default-value="{dictLabel: form.bankName,dictValue: form.bankCode}" @confirm="bankChange"></select-bank>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDisabled: false,
				userInfo:{},
				agreement:false,
				bankShow:false,
				typeOptions:[{dictLabel: '借记卡扣款', dictValue: 11}],//,{dictLabel: '信用卡扣款', dictValue: 12}
				authCode: '',
				form:{
					treatyType: 11,
					bankPhone:'',
					bankCard:'',
					bankCode: '',
					bankName:'',
					custCardCvv2: '',
					custCardValidDate:''
				},
				codeText:'获取验证码'
			}
		},
		computed:{
			btnDisabled(){
				return !this.form.bankPhone || !this.form.bankCard || !this.form.bankCode || (this.form.treatyType==12 && (!this.form.custCardCvv2 || !this.form.custCardValidDate))
			}
		},
		onLoad() {
			this.getDicts()
		},
		methods: {
			getDicts(){
				this.$request({
					url: '/loginUserInfo/getDetail',
					method: 'get',
				}).then(res => {
					this.userInfo = res.data
					this.form.treatyType = res.data.treatyType || 11
					this.form.bankCard = res.data.bankCard
					this.form.bankCode = res.data.bankCode
					this.form.bankName = res.data.bankName
					this.form.bankPhone = res.data.bankPhone || res.data.phone
					this.form.custCardCvv2 = res.data.custCardCvv2
					this.form.custCardValidDate = res.data.custCardValidDate
					if(this.userInfo.fourAuthentication===1){
						this.isDisabled = true
					}
				})
			},
			handleBank(){
				this.bankShow = true
			},
			bankChange(data){
				this.form.bankName = data.dictLabel
				this.form.bankCode = data.dictValue
			},
			confirm(){
				if (!this.agreement) {
					return this.$u.toast('请先阅读并同意用户服务协议');
				}
				uni.showLoading({ mask:true })
				this.form.bankCard = this.form.bankCard.replace(/\s+/g, '')
				this.$request({
					url: this.userInfo.fourAuthentication===1?'/orderInfo/confirmSecondCollectApply':'/orderInfo/confirmCollectApply',
					method: 'post',
					data: {authCode: this.authCode}
				}).then(res => {
					this.$u.toast(this.userInfo.fourAuthentication===1?'确认绑卡成功':'申请绑卡成功');
					setTimeout(()=>{
						this.$common.navigateBack(this.userInfo.fourAuthentication===1?2:1)
					},1200)
				})
			},
			getCode(){
				if(this.$refs.uCode.canGetCode) {
					if (this.btnDisabled) {
						return this.$u.toast('您有未填写的信息');
					}
					uni.showLoading({ mask:true })
					this.$request({
						url: this.userInfo.fourAuthentication===1?'/orderInfo/saveSecondOrderInfoFour':'/orderInfo/saveOrderInfoFour',
						method: 'post',
						data:this.form
					}).then(res => {
						this.$refs.uCode.start();
					})
				}
			},
			codeChange(text){
				this.codeText = text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-repaymentCard {
		background-image: url('../static/img/applyFor/repaymentCard-header-bg.png');
		background-size: 100% 414rpx;
		background-repeat: no-repeat;
		padding: 80rpx 24rpx 24rpx;
		.title-text{
			font-size: 40rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}
		.title-desc{
			color: rgba(255,255,255,0.72);
			margin-bottom: 48rpx;
		}
		.auth-form-box{
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding:0 24rpx;
			margin-bottom: 24rpx;
			.auth-form-content{
				.auth-form-item{
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					.auth-form-label{
						flex-shrink: 0;
					}
					.auth-form-value{
						width: 100%;
						.get-code{
							margin-left: 24rpx;
							color: #1F78FF;
							border-left: 2rpx solid #f5f5f5;
							padding-left: 24rpx;
							&.disabled{
								color: #aaa;
							}
						}
					}
					&:not(:last-child){
						border-bottom: 2rpx solid #f5f5f5;
					}
				}
			}
		}
		.agreement-box{
			display: flex;
			margin-bottom: 24rpx;
			padding-top: 8rpx;
		}
	}
</style>
